<template>
  <div class="banner-sb">
    <div :class="['banner']" :style="{ backgroundColor: bgColor }">
      <div class="tooth-icon">
        <img src="@/assets/images/usmile.png" alt="" />
      </div>
      <div class="electric">
        <div class="electric-svg">
          <SvgIcon :svg-name="svgName" className="electric-svg" />
        </div>
        <span>{{ props.batteryLeval }}%</span>
      </div>

      <!-- 离线 -->
      <div v-if="!props.connected" class="tooltip" @click="toOffline">
        <offline-tooltip />
      </div>

      <!-- 电量不足 -->
      <div
        v-if="props.connected && props.lowBatteryNotify == 1"
        class="tooltip"
      >
        <error-tooltip :msg="state.errorMsg" type="size" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, defineProps, computed } from 'vue'
import { sys } from '../../utils/sys'

import { lowPowerMsg } from '../../utils/enum'
import OfflineTooltip from './OfflineTooltip.vue'
import ErrorTooltip from './ErrorTooltip.vue'

const state = reactive({
  errorMsg: lowPowerMsg
})

const props = defineProps({
  connected: {
    type: Boolean,
    default: true
  },
  batteryLeval: {
    type: Number,
    default: 100
  },
  useSize: {
    type: Number,
    default: 180
  },
  lowBatteryNotify: {
    type: Number,
    default: 0
  }
})

import { useRouter } from 'vue-router'
const router = useRouter()

const svgName = computed(() => {
  if (props.batteryLeval <= 100 && props.batteryLeval > 75) {
    return 'electric100'
  } else if (props.batteryLeval <= 75 && props.batteryLeval > 50) {
    return 'electric75'
  } else if (props.batteryLeval <= 50 && props.batteryLeval > 25) {
    return 'electric50'
  } else {
    return 'electric25'
  }
})

const bgColor = computed(() => {
  const { RUNNING_BG_COLOR, ERROR_BG_COLOR, OFFLINE_BG_COLOR } = sys.color

  if (!props.connected) {
    return OFFLINE_BG_COLOR
  }
  if (props.lowBatteryNotify == 1) {
    // 低电量
    return ERROR_BG_COLOR
  } else {
    return RUNNING_BG_COLOR
  }
})

const toOffline = () => {
  router.push({ path: '/offline', query: { offline: Math.random() } })
}
</script>

<style lang="less" scoped>
@import url(../../assets/style/style.less);
</style>
